<template>
  <el-dialog title="页面内容" :visible.sync="showContentDialog" center >

    <div class="item">
      <template v-for="item in content">
        <p v-if="item.type === 'text'">{{item.value}}</p>
        <img v-if="item.type ==='image'" :src="item.value" alt="" @click="bigImage(item.value)">
      </template>
    </div>

    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
        <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
      </div>
    </transition>

  </el-dialog>
</template>

<script>

  export default {
    name: 'content',
    data(){
      return{
        showContentDialog: false,
        content: [],
        bigImageSrc: null,
      }
    },

    methods:{
      showContent(content){
        this.content = content
        console.log(this.content)
        this.showContentDialog = !this.showContentDialog
      },

      // 大图弹窗函数
      bigImage(src) {
        if (src!==null) {
          this.$set(this, 'bigImageSrc', src)
          console.log(this.bigImageSrc)
        } else {
          this.$set(this, 'bigImageSrc', null)
        }
      },
    }

  }
</script>

<style scoped>
  .item{

    text-align: center;
  }
  p{
    margin: 10px 0;
  }
  img{
    height: auto;
    width: auto;
    display: block;
    margin: 10px auto;

  }
  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
</style>

